<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>文件列表</title>
  <script src="../../static/kaige/js/szload.js"></script>
  <style>
    .file_table_img {
      max-width: 30px;
      max-height: 30px;
      border: 0;
    }

    .file_table_i {
      font-size: 28px;
      color: rgba(13, 128, 53, 0.77);
    }
  </style>
</head>

<body>
  <div class="kaige-body layui-form">
    <table class="layui-table" id="pageTable" lay-filter="pageTable" lay-size="sm"></table>
    <input type="hidden" name="keywordsCache" value="{}" />
    <input type="hidden" name="add_file">
    <input type="hidden" name="batch_files">
  </div>
  <script>
    load_init_js(function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).use(['form', 'layer',  'laydate', 'table', 'kaige', 'treeTable'], function () {
        var form = layui.form, layer = layui.layer, table = layui.table, $ = layui.$, kaige = layui.kaige, treeTable = layui.treeTable;

        //查看图片
        window.viewImage = function (imgUrl) { kaige.viewimage({ maxwidth: 600, maxheight: 600, url: imgUrl }); }

        //layui table 两个参数必传 headers,where where 必须包含signature:签名结果值
        kaige.table({
          elem: '#pageTable',
          title: '上传文件列表',
          url: '/files/index', // url只需填写 模块底下的节点路径
          id: 'pageTable',
          toolbar: '#dtoolbar',
          cols: [[
            { type: 'checkbox', fixed: 'left' },
            {
              field: 'file_ext', title: '标识图', width: 90, align: 'center', templet: function (d) {
                return file_type_icon(d);
              }
            },
            { field: 'id', title: '文件ID', width: 330, hide: true },
            { field: 'group_id', title: '分组ID', width: 100, hide: true },
            { field: 'hash', title: 'HASH', width: 330, hide: true },
            { field: 'group_name', title: '文件分组', width: 120 },
            { field: 'name', title: '文件名称', width: 330 },
            { field: 'file_type', title: '文件类型', width: 200, hide: true },
            { field: 'file_ext', title: '扩展名', width: 100 },
            { field: 'file_size', title: '字节', width: 120, hide: true },
            { field: 'file_size_cn', title: '文件大小', width: 150 },
            { field: 'url', title: 'Web地址', width: 300, hide: true },
            { field: 'path', title: '物理地址', width: 300, hide: true },
            {
              field: 'storage_engine', title: '存储引擎', width: 120, templet: function (d) {
                return storage_engineTd(d);
              }
            },
            { field: 'company_name', title: '单位', width: 200 },
            { field: 'use_count', title: '使用次数', width: 100 },
            { field: 'handle_name', title: '上传者', width: 100 },
            { field: 'browser', title: '浏览器', width: 200, hide: true },
            { field: 'ip', title: '来源IP', width: 120 },
            { field: 'create_time', sort: true, width: 200, title: '上传时间', align: 'center' },
          ]],
          done: function (res, curr, count) {
            //搜索框--回车提交
            $("input[name=keywords]").on('keyup', function (e) {
              if (event.keyCode == 13) {
                $("#btn-search").trigger("click");
              }
            });
            treelist();
            //给筛选表单赋值
            form.val("searchform", {
              "keywords": getkeywords('keywords') ? getkeywords('keywords') : '',
              "pid": getkeywords('pid') ? getkeywords('pid') : '',
            });
          }
        });

        //列表-监听表头工具栏事件dtoolbar
        table.on('toolbar(pageTable)', function (obj) {
          var checkStatus = table.checkStatus(obj.config.id);
          switch (obj.event) {
            case 'btn-search':
              btnsearch();
              break;
            case 'btn-class':
              btnclass(checkStatus);
              break;
            case 'btn-thorough':
              btnthorough(checkStatus);
              break;
            case 'btn-group':
              btngroupmanage();
              break;
            case 'btn-add':
              btn_add_file();
              break;
          }
        });

        //获取筛选表单
        function getsearchform() {
          var gfv = {
            'group_id': valnotnull('pid'),
            'keywords': valnotnull('keywords'),
          };
          gfv.rnd = Math.random();
          return gfv;
        }

        //执行筛选,重载表格
        function reload_sxtable(opt) {
          if (opt && JSON.stringify(opt.where) == "{}" && opt.type === 1) {
            layer.msg('当前没有筛选条件！'); return;
          }
          if (opt.type === 2) {
            opt.where = {};
            opt.where = getsearchform();
          }
          setTimeout(function () {
            table.reload('pageTable', {
              height: 'full-10',
              page: { curr: 1 },
              where: opt.where
            }, true);
          }, 300);
        }

        /*筛选*/
        function btnsearch() {
          savekeywords('keywords', $("input[name=keywords]").val());
          reload_sxtable({ type: 2 });
        }

        //删除文件
        function btnthorough(d) {
          if (d.data.length <= 0) {
            layer.msg("请先选要操作的数据");
            return false;
          }
          var ids = '';
          $.each(d.data, function (i, obj) {
            ids += obj.id + ',';
          });
          ids = ids.substring(0, ids.length - 1);
          layer.confirm('确定删除选中的数据吗？', {
            title: '提示',
            btn: ['确认', '取消']
          }, function () {
            $.post("/files/del", { 'id': ids }, function (res) {
              res.status && table.reload("pageTable");
              layer.msg(res.msg);
            });
          });
        }

        //移动分组
        function btnclass(d) {
          if (d.data.length <= 0) {
            layer.msg("请先选要操作的数据");
            return false;
          }
          var ids = [];
          $.each(d.data, function (i, obj) {
            ids.push(obj.id);
          });
          var updata = {
            files_ids: ids,
            group_id: 0
          };
          $.get('/files/groupList', function (res) {
            if (res.status) {
              var shtml = '<select name="group_id" lay-filter="movegroup_id_select" id="movegroup_id_select"><option value=""></option>';
              $(res.data).each(function (index, item) {
                shtml += '<option value="' + item.id + '">' + item.name + '</option>';
              });
              shtml += '</select>';
              var html = '<form class="layui-form layui-form-pane kaige-body-form movegroupform" lay-filter="movegroupform">\
                    <div class="layui-form-item">\
                        <label class="layui-form-label">分组名称</label>\
                        <div class="layui-input-inline">'+ shtml + '</div>\
                    </div>\
                    <div class="layui-form-item"><button class="layui-hide" lay-submit="" id="movegroupform-btnsave" lay-filter="movegroupform-btnsave" >保存数据</button>\
                    </div>\
                    </form>';

              layer.open({
                id: 'files-editclass'
                , title: '<i class="fa fa-object-group"></i> 分组变更'
                , type: 1
                , content: html
                , area: ['360px', '200px']
                , btn: ['确定', '取消']
                , yes: function (index, layero) {
                  $('#movegroupform-btnsave').click();
                }
                , success: function (layero, index) {
                  form.render(null, 'movegroupform');
                  $('#files-editclass').css('overflow', 'visible');
                  form.on('submit(movegroupform-btnsave)', function (data) {
                    updata.group_id = data.field.group_id;
                    szoa.ajax({
                      url: '/files/moveGroup',
                      data: updata,
                      dataHaveArray: 1,
                      type: 'POST',
                      success: function (res1) {
                        layer.msg(res1.msg);
                        if (res1.status) {
                          table.reload('pageTable', {}, true);
                          layer.close(index);
                        }
                      }
                    });
                    return false;
                  });
                }
              });
            } else {
              layer.msg('加载分组出错');
            }
          });
        }

        //选择文件分组
        function treelist() {
          $.get('/files/groupList', function (res) {
            if (res.status) {
              var html = '<option value="">请选择文件分组</option>';
              $(res.data).each(function (index, item) {
                html += '<option value="' + item.id + '">' + item.name + '</option>';
              });
              $("#files_group_select").html(html);
              setTimeout(function () {
                layui.form.render('select');
                layui.form.on('select(files_group_select)', function (data) {
                  $('#group_pid_id').val(data.value);
                  savekeywords('pid', data.value);
                  reload_sxtable({ type: 2 });
                });
              }, 20);
            }
          });
        }

        //分组管理
        function btngroupmanage() {
          layer.open({
            id: 'files-group-win'
            , title: '<i class="fa fa-object-group"></i> 分组管理'
            , type: 1
            , content: '<div class="kaige-body"><table class="layui-hide" lay-filter="files-group-table" id="files-group-table"></table></div>'
            , area: ['600px', '500px']
            , success: function (layero, index) {
              //展示已知数据
              table.render({
                elem: '#files-group-table'
                , url: '/files/groupList'
                , toolbar: '#grouphead'
                , defaultToolbar: ['filter']
                , cols: [[
                  { type: 'checkbox', fixed: 'left' }
                  , { field: 'id', title: 'ID', width: 80 }
                  , { field: 'name', title: '名称', width: 150 }
                  , { title: '操作', toolbar: '#dtrbar', align: 'center', width: 120 }
                ]],
                response: {
                  statusName: 'status'
                  , statusCode: true
                }
              });

              //头工具栏事件
              table.on('toolbar(files-group-table)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                  case 'add':
                    groupAdd();
                    break;
                };
              });

              //监听行工具事件
              table.on('tool(files-group-table)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                  layer.confirm('真的要删除分组【' + data.name + '】么', function (index) {
                    $.post('/files/deleteGroup', { group_id: data.id }, function (res) {
                      layer.msg(res.msg);
                      if (res.status) {
                        obj.del();
                      }
                    });
                    layer.close(index);
                  });
                }
              });


            }
          });
        }

        //添加分组
        function groupAdd() {
          layer.open({
            type: 1
            , title: '<i class="fa fa-plus-square-o"></i> 添加'
            , content: gropuFormHtml()
            , area: ['360px', '200px']
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
              $('#groupform-btnsave').click();
            }
            , success: function (layero, index) {
              form.render(null, 'groupform');
              form.on('submit(groupform-btnsave)', function (data) {
                $.post('/files/addGroup', { name: data.field.name }, function (res) {
                  layer.msg(res.msg);
                  if (res.status) {
                    table.reload('files-group-table');
                    layer.close(index);
                  }
                });
                return false;
              });
            }
          });
        }

        //分组表单
        function gropuFormHtml() {
          var html = '<form class="layui-form layui-form-pane kaige-body-form groupform" lay-filter="groupform">\
                    <div class="layui-form-item">\
                        <label class="layui-form-label">分组名称</label>\
                        <div class="layui-input-inline">\
                            <input name="name" required  lay-verify="required" title="请输入分组名称" placeholder="请输入分组名称" autocomplete="off" class="layui-input">\
                        </div>\
                    </div>\
                    <div class="layui-form-item"><button class="layui-hide" lay-submit="" id="groupform-btnsave" lay-filter="groupform-btnsave" >保存数据</button>\
                    </div>\
                    </form>';
          return html;
        }

        //上传文件
        function btn_add_file() {
          window.file_win_layid = layer.open({
            type: 2,
            title: '<i class="fa fa-upload"></i> 上传文件',
            shade: 0.5,
            area: ['90%', '90%'],
            content: szoa.client.path + '/pages/files/upfiles.html?id=7',
            success: function (layero, index) {
              window.file_info = function (res) {
                if (res.id && res.url) {
                  layer.msg('上传成功');
                  table.reload('pageTable');
                  layer.close(window.file_win_layid);
                }
              };
            }
          });
        }
      });
    });
  </script>
  <script type="text/html" id="dtoolbar">
      <div class="layui-form filesearch" lay-filter="searchform">
          <div class="layui-inline" style="width:220px">
              <input type="hidden" value="" id="group_pid_id" />
              <select name="pid" lay-filter="files_group_select" id="files_group_select"></select>
          </div>
          <div class="layui-inline">
              <input type="text" class="layui-input tsinput" name="keywords" placeholder="名称/ID">
              <button class="tsbutton" lay-event="btn-search" id="btn-search" title="筛选"><i class="layui-icon layui-icon-search"></i></button>
          </div>
          <div class="layui-btn-group">
              <button class="layui-btn layui-btn-sm" lay-event="btn-add"><i class="layui-icon layui-icon-upload"></i> 上传文件</button>
              <button class="layui-btn layui-btn-sm" lay-event="btn-group"><i class="fa fa-object-group"></i> 分组管理</button>
              <button class="layui-btn layui-btn-sm" lay-event="btn-class"><i class="fa fa-edit"></i> 移动分组</button>
              <button class="layui-btn layui-btn-sm" lay-event="btn-thorough"><i class="fa fa-trash-o"></i> 删除文件</button>
          </div>
      </div>
  </script>
  <script type="text/html" id="dtrbar">
      <div class="layui-btn-group">
          <button class="layui-btn layui-btn-xs" lay-event="del" title="删除"><i class="fa fa-trash-o"></i> 删除分组</button>
      </div>
  </script>
  <script type="text/html" id="grouphead">
      <div class="layui-btn-container">
          <button class="layui-btn layui-btn-xs" lay-event="add" title="添加"><i class="fa fa-plus-square-o"></i> 添加分组</button>
      </div>
  </script>
</body>

</html>